class ClipImage {
  constructor(el, imageList, config) {
    if (!el) {
      throw Error("el params is not ignore");
    }

    if (!Array.isArray(imageList)) {
      throw Error("imageList params is must Array");
    }

    if (imageList.length < 2) {
      throw Error("imageList.length must > 2");
    }

    this.container = el;
    this.imageList = imageList;
    this.squareList = [];
    this.activeImageIndex = 0;
    this.loopTimeout = null;

    this.config = Object.assign(
      {},
      {
        squareSize: 40,
        activeTime: 3000,
        autoLoop: true,
      },
      config
    );

    this.initLoop();

    function debounce(func, delay) {
      let timer;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(func, delay);
      };
    }
    window.addEventListener(
      "resize",
      debounce(() => {
        this.activeImageIndex = 0;
        this.squareList = [];
        clearTimeout(this.loopTimeout);
        this.initLoop();
      }),
      800
    );
  }

  initContainer() {
    this.container.style.overflow = "hidden";
    this.container.style.position = "relative";

    this.container.style.height = "100vh";
    this.container.style.width = "100vw";

    // this.container.perspective = '1000px'

    this._w = this.container.offsetWidth;
    this._h = this.container.offsetHeight;
  }

  next() {
    this.activeImageIndex =
      this.activeImageIndex + 1 > this.imageList.length - 1
        ? 0
        : this.activeImageIndex + 1;
    this.loop();
    console.log(
      "🚀 ~ file: clipImage.js:62 ~ ClipImage ~ next ~ this.activeImageIndex:",
      this.activeImageIndex
    );

    this.config.autoLoop &&
      (this.loopTimeout = setTimeout(
        () => this.next(),
        this.config.activeTime * 2
      ));
  }
  last() {
    this.activeImageIndex =
      this.activeImageIndex - 1 < 0
        ? this.activeImageIndex - 1
        : this.imageList.length - 1;
  }

  loop() {
    this.squareList.forEach((s) => {
      setTimeout(() => {
        s.style.backgroundImage = `url('${
          this.imageList[this.activeImageIndex]
        }')`;
      }, Math.random() * this.config.activeTime);
    });
  }

  initLoop() {
    this.initContainer();

    const xLen =
      this._w % this.config.squareSize === 0
        ? this._w / this.config.squareSize
        : this._w / this.config.squareSize + 1;

    const yLen =
      this._h % this.config.squareSize === 0
        ? this._h / this.config.squareSize
        : this._h / this.config.squareSize + 1;

    for (let x = 0; x < xLen; x++) {
      for (let y = 0; y < yLen; y++) {
        const square = document.createElement("div");

        square.className = "square";
        square.style.position = "absolute";

        square.style.width = this.config.squareSize + "px";
        square.style.height = this.config.squareSize + "px";

        square.style.left = this.config.squareSize * x + "px";
        square.style.top = this.config.squareSize * y + "px";

        square.style.backgroundImage = `url('${
          this.imageList[this.activeImageIndex]
        }')`;
        square.style.backgroundSize = `${this._w}px auto`; // 设置背景大小为容器大小
        square.style.backgroundPosition = `-${x * this.config.squareSize}px -${
          y * this.config.squareSize
        }px`; // 设置背景位置，每个正方形的偏移量
        // square.style.animation = `rotateAnimation 1s forwards`;

        this.squareList.push(square);
        setTimeout(() => {
          this.container.appendChild(square);
        }, Math.random() * this.config.activeTime);
      }
    }
    setTimeout(() => this.next(), this.config.activeTime * 2);
  }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const drawClip = (el, imageList, config) => {
  console.log(el);
  return new ClipImage(el, imageList, config);
};

// drawClip(document.querySelector(".banner"), [
//   "./static/image/01.jpg",
//   "./static/image/02.jpg",
// ]);
